<%--巴夫洛后台管理首页--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!-- 导入头部top文件 start -->
<%@include file="common/header.jsp" %>
<body style="height: 90%; margin: 0">
<section class="panel panel-default m-t m-l m-r" style="box-shadow: 1px 1px 1px #ccc">
    <div class="row m-l-none m-r-none bg-light">
        <div class=" col-sm-4 col-md-4 b-r">
        <span class="fa-stack fa-2x pull-left m-r-sm">
                            <i class="fa fa-circle fa-stack-2x text-info"></i>
                            <i class="fa fa-truck fa-stack-1x text-white"></i>
        </span>
            <a class="clear" href="#">
                <span class="h3 block m-t-xs"><strong>${model.jobCount}</strong></span>
                <div class="text-muted text-uc">发布职位</div>
            </a>
        </div>
        <div class="col-sm-4 col-md-4 b-r bg-light" style="background-color: #f7f7f7">
        <span class="fa-stack fa-2x pull-left m-r-sm">
            <i class="fa fa-circle fa-stack-2x text-warning"></i>
            <i class="fa fa-legal fa-stack-1x text-white"></i>
            <span class="easypiechart pos-abt" data-percent="100" data-line-width="4" data-track-color="#fff"
                  data-scale-color="false" data-size="50" data-line-cap="butt" data-animate="2000" data-target="#bugs" data-update="3000"></span>
        </span>
            <a class="clear" href="#">
                <span class="h3 block m-t-xs"><strong>${model.inboxCount}</strong></span>
                <div class="text-muted text-uc">候选人</div>
            </a>
        </div>
        <div class="col-sm-4 col-md-4 b-r">
        <span class="fa-stack fa-2x pull-left m-r-sm">
            <i class="fa fa-circle fa-stack-2x text-danger"></i>
            <i class="fa fa-clipboard  fa-stack-1x text-white"></i>
            <span class="easypiechart pos-abt" data-percent="100" data-line-width="4" data-track-color="#f5f5f5"
                  data-scale-color="false" data-size="50" data-line-cap="butt" data-animate="3000" data-target="#firers" data-update="5000"></span>
        </span>
            <a class="clear" href="#">
                <span class="h3 block m-t-xs"><strong>${model.userCount}</strong></span>
                <div class="text-muted text-uc">用户数量</div>
            </a>
        </div>
    </div>
</section>

<div id="container" style="height: 90%"></div>
<script src="/static/js/jquery.min.js?v=2.1.4"></script>
<script src="/static/js/highcharts.js?v=4.2.5"></script>
<script type="text/javascript">
    (function ($) {
        $.get(G_Path.path + '/sys/statistics/list', function (detail) {
            var data = $.parseJSON(detail);
            $('#container').highcharts({
                title: {
                    text: '数据报表',
                    x: -20 //center
                },
                subtitle: {
                    text: '',
                    x: -20
                },
                xAxis: {
                    categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', "八月", "九月", "十月", "十一月", "十二月"]
                },
                yAxis: {
                    title: {
                        text: ''
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }]
                },
                tooltip: {
                    valueSuffix: ''
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'middle',
                    borderWidth: 0
                },
                series: [
                    {
                        name: '发布职位',
                        data: data.job
                    },
                    {
                        name: '候选人',
                        data: data.inbox
                    },
                    {
                        name: '用户数',
                        data: data.user
                    }
                ]
            });
        });
    })(jQuery);

</script>
</body>
</html>